<template>
    <div style="width: 100%;height: 100%;background-size: cover;">
        <% if(data.data.length == 0){ %>
        <div style="position: absolute;left: 400px;top: 250px;color: #000000;">暂无数据</div>
        <%}else{%>
        <% for(var i = 0;i< data.data.length;i++){ %>
        <% var item = data.data[i]; %>
        <div name="{{data.name}}"  style="position: absolute;line-height: {{item.height}}px;text-align: left;overflow:hidden;font-size: 24px;color: #000;;left: {{item.left}}px;top: {{item.top}}px;width:{{item.width}}px;height:{{item.height}}px;">
            <img style="position: absolute;top: 0px;width: 100%;height: 100%;" src="{{item.cover||"images/demo/"+i+".png"}}" >
            <div id="{{data.name}}-{{i}}"  style="background: rgba(0,0,0,.5);position: absolute;bottom: 0px;width: 100%;height: 35px;line-height: 35px;text-align: center;color: #ffffff;">{{item.title}}</div>
        </div>
        <%}%>
        <%}%>
    </div>
</template>

<script>


    (function (){
        return {
            left:0,
            top:0,
            width:1140,
            height:490,
            name:"imgList",
            imagesPos:Q.getInt("imagesPos"),
            listItem:{
                "row":2,
                "col":4,
                "width":272,
                "height":178,
                "space_top":25,
                "space_left":12,
                "padding_left":20,
                "padding_top":20
            },
            data:[
                {"title":"123123","cover":"images/demo/0.png"},
                {"title":"123123","cover":"images/demo/1.png"},
                {"title":"123123","cover":"images/demo/2.png"},
                {"title":"123123","cover":"images/demo/3.png"},
                {"title":"123123","cover":"images/demo/4.png"},
                {"title":"123123","cover":"images/demo/5.png"}
            ],
            create:function(){
                if(this.imagesPos!=-1 && Q.getDecoded("imagesPos") != "null"){
                    this.page = Q.getInt('page');
                }else{
                    this.page = 0;
                }

            },
            updated:function(){
                this.listFocus = new Focus({
                    containner:this.dom,
                    focusFolder:"images/focus20",
                    td:16,
                    padding_left:4.6,
                    padding_top:4.6,
                    spacing_left:4,
                    spacing_top:4
                });
            },
            overBottom:function(){
                if(this.page<this.totalPage){
                    this.page++
                    this.fetchListData(1)
                }

            },
            overTop:function(){
                if(this.page>0){
                    this.page--;
                    this.fetchListData(1)
                }
            },
            focusChange:function(item,last_item){
                this.listFocus.bigFocusChange(item,last_item);
                if(last_item){
                    this.itemFocusOut(last_item);
                }
                this.itemFocusOn(item);
            },
            itemFocusOn:function (item) {
                this.show();
                // Util.showTitleForMarquee(item.title,$("szywList-"+item.index),5);
                this.listFocus.show();
            },
            itemFocusOut:function (item) {
                // Util.showTitleForMarquee(item.title,$("szywList-"+item.index),100);
                this.listFocus.hidden();
            },
            enter:function (item) {
                pageRedirectTo("detail.html?id="+item.id+"&title=images/logo.png",{area:1,menu:menuObj.index,imagesPos:item.index,page:this.page})
            }
        }
    })()
</script>